<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>验证修复效果</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 1000px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f5f5f5;
        }
        .container {
            background: white;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        h1 {
            color: #2e7d32;
            text-align: center;
            margin-bottom: 30px;
        }
        .test-section {
            margin-bottom: 20px;
            padding: 15px;
            border: 1px solid #ddd;
            border-radius: 5px;
        }
        .test-section h3 {
            color: #2e7d32;
            margin-top: 0;
        }
        pre {
            background-color: #f8f9fa;
            padding: 10px;
            border-radius: 5px;
            overflow-x: auto;
            white-space: pre-wrap;
        }
        button {
            background-color: #2e7d32;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 5px;
            cursor: pointer;
            margin: 5px;
        }
        button:hover {
            background-color: #1b5e20;
        }
        .success {
            color: #2e7d32;
            background-color: #e8f5e8;
            padding: 10px;
            border-radius: 5px;
            margin: 10px 0;
        }
        .error {
            color: #d32f2f;
            background-color: #ffebee;
            padding: 10px;
            border-radius: 5px;
            margin: 10px 0;
        }
        .info {
            color: #1976d2;
            background-color: #e3f2fd;
            padding: 10px;
            border-radius: 5px;
            margin: 10px 0;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>🔧 验证修复效果</h1>
        
        <div class="test-section">
            <h3>1. 测试用户登录</h3>
            <button onclick="testLogin()">测试登录 (admin/123456)</button>
            <div id="loginStatus"></div>
            <pre id="loginResult"></pre>
        </div>

        <div class="test-section">
            <h3>2. 验证用户数据结构</h3>
            <button onclick="verifyUserData()">验证用户数据结构</button>
            <div id="verifyStatus"></div>
            <pre id="verifyResult"></pre>
        </div>

        <div class="test-section">
            <h3>3. 测试购物车功能</h3>
            <button onclick="testCartFunction()">测试购物车功能</button>
            <div id="cartStatus"></div>
            <pre id="cartResult"></pre>
        </div>

        <div class="test-section">
            <h3>4. 清除测试数据</h3>
            <button onclick="clearTestData()">清除测试数据</button>
            <div id="clearStatus"></div>
        </div>
    </div>

    <script>
        const API_BASE_URL = 'http://localhost:8080';
        
        async function testLogin() {
            const statusDiv = document.getElementById('loginStatus');
            const resultDiv = document.getElementById('loginResult');
            
            statusDiv.innerHTML = '<div class="info">正在登录...</div>';
            resultDiv.textContent = '';
            
            try {
                const response = await fetch(`${API_BASE_URL}/user/login?username=admin&password=123456`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    }
                });
                
                const data = await response.json();
                
                if (response.ok && data.code === '1') {
                    // 保存用户信息
                    localStorage.setItem('currentUser', JSON.stringify(data.obj));
                    
                    statusDiv.innerHTML = '<div class="success">✅ 登录成功！</div>';
                    resultDiv.textContent = `用户信息:\n${JSON.stringify(data.obj, null, 2)}`;
                } else {
                    statusDiv.innerHTML = '<div class="error">❌ 登录失败</div>';
                    resultDiv.textContent = `错误信息: ${data.message || '未知错误'}\n响应数据: ${JSON.stringify(data, null, 2)}`;
                }
            } catch (error) {
                statusDiv.innerHTML = '<div class="error">❌ 登录请求失败</div>';
                resultDiv.textContent = `错误信息: ${error.message}`;
            }
        }
        
        function verifyUserData() {
            const statusDiv = document.getElementById('verifyStatus');
            const resultDiv = document.getElementById('verifyResult');
            
            const currentUser = localStorage.getItem('currentUser');
            if (!currentUser) {
                statusDiv.innerHTML = '<div class="error">❌ 请先登录</div>';
                resultDiv.textContent = '没有找到用户数据';
                return;
            }
            
            const userData = JSON.parse(currentUser);
            const verification = {
                hasId: 'id' in userData,
                hasUid: 'uid' in userData,
                idValue: userData.id,
                uidValue: userData.uid,
                idType: typeof userData.id,
                uidType: typeof userData.uid,
                allFields: Object.keys(userData),
                isIdValid: userData.id && userData.id !== userData.uid,
                recommendedUserId: userData.id || userData.uid || 1
            };
            
            if (verification.hasId && verification.isIdValid) {
                statusDiv.innerHTML = '<div class="success">✅ 用户数据结构正确！包含独立的id字段</div>';
            } else if (verification.hasId) {
                statusDiv.innerHTML = '<div class="error">⚠️ 用户数据结构有问题：id和uid相同</div>';
            } else {
                statusDiv.innerHTML = '<div class="error">❌ 用户数据结构错误：缺少id字段</div>';
            }
            
            resultDiv.textContent = `验证结果:\n${JSON.stringify(verification, null, 2)}`;
        }
        
        async function testCartFunction() {
            const statusDiv = document.getElementById('cartStatus');
            const resultDiv = document.getElementById('cartResult');
            
            const currentUser = localStorage.getItem('currentUser');
            if (!currentUser) {
                statusDiv.innerHTML = '<div class="error">❌ 请先登录</div>';
                resultDiv.textContent = '没有找到用户数据';
                return;
            }
            
            const userData = JSON.parse(currentUser);
            const userId = userData.id || userData.uid || 1;
            
            statusDiv.innerHTML = '<div class="info">正在测试购物车功能...</div>';
            resultDiv.textContent = '';
            
            try {
                const cartData = {
                    userId: userId,
                    factoryId: 1, // 假设工厂ID为1
                    quantity: 1
                };
                
                const response = await fetch(`${API_BASE_URL}/cart/add`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify(cartData)
                });
                
                const data = await response.json();
                
                if (response.ok && data.code === '1') {
                    statusDiv.innerHTML = '<div class="success">✅ 购物车功能测试成功！</div>';
                } else {
                    statusDiv.innerHTML = '<div class="error">❌ 购物车功能测试失败</div>';
                }
                
                resultDiv.textContent = `测试详情:\n用户ID: ${userId}\n请求数据: ${JSON.stringify(cartData, null, 2)}\n响应数据: ${JSON.stringify(data, null, 2)}`;
            } catch (error) {
                statusDiv.innerHTML = '<div class="error">❌ 购物车功能请求失败</div>';
                resultDiv.textContent = `错误信息: ${error.message}`;
            }
        }
        
        function clearTestData() {
            localStorage.removeItem('currentUser');
            localStorage.removeItem('currentCompany');
            document.getElementById('clearStatus').innerHTML = '<div class="success">✅ 测试数据已清除</div>';
        }
        
        // 页面加载时自动验证
        window.onload = function() {
            verifyUserData();
        };
    </script>
</body>
</html>
